<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" th:href="@{/assets/adminlte-2.3.7/css/AdminLTE.min.css}"/>
    <link rel="stylesheet" th:href="@{/assets/adminlte-2.3.7/css/skins/_all-skins.min.css}"/>
    <!--<link rel="stylesheet" href="/layui/css/layui.css">-->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue login-page" target="_top">
<div class="login-box">
    <div class="login-logo">
        <b>后台登录</b>
    </div>
    <div class="login-box-body" id="log">
        <h3 class="text-center">家乐福交易管理</h3>
        <form action="/console/login" method="post">
            <div class="form-group has-feedback">
                <input type="text" name="username" class="form-control" placeholder="username"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control" placeholder="Password"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div style="width: 100%; text-align: right;margin-bottom: 5px">
                <a id="regBut">注册</a>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
            </div>
        </form>
    </div>
    <div class="login-box-body" id="reg" style="display: none">
        <h3 class="text-center">欢迎注册</h3>
        <div action="/console/login" method="post">
            <div class="form-group has-feedback">
                <input id="username" type="text" name="username" class="form-control" placeholder="用户名"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input id="xingming" type="text" name="xingming" class="form-control" placeholder="姓名"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="password" name="password" class="form-control" placeholder="密码"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div style="width: 100%; text-align: right;margin-bottom: 5px">
                <a id="logBut">登录</a>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button type="submit" class="btn btn-primary btn-block btn-flat" id="register">注册</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script>
    if (top != window) {
        top.location.href = window.location.href;
    }
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        $('#regBut').click(function () {
            $("#log").css('display', "none");
            $("#reg").css('display', '');
        })
        $('#logBut').click(function () {
            $("#log").css('display', "");
            $("#reg").css('display', 'none');
        })
        $('#register').click(function () {
            $.ajax({
                url: '/users/addUser',
                method: "get",
                data: {
                    'username': $('#username').val(),
                    'xingming': $('#xingming').val(),
                    'password': $('#password').val(),
                },
                success: function (data1) {
                    if (data1.info){
                        $('#username').val('');
                        $('#xingming').val('');
                        $('#password').val('');
                    }
                    layer.msg(data1.msg);
                },
                error: function () {
                    layer.msg("添加失败");
                    // layer.msg("ajax执行失败");
                }
            });
        })
    })
</script>
</body>
</html>